<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Atech Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/swipebox.css">
 <!------ Light Box ------>
    <script src="js/jquery.swipebox.min.js"></script> 
    <script type="text/javascript">
		jQuery(function($) {
			$(".swipebox").swipebox();
		});
	</script>
    <!------ Eng Light Box ------>

</head>
<body>
<!-- header -->
	<div class="banner">
		<div class="header">
			<div class="container">
				<div class="head-left">
					<ul class="number">
						<li><span><i class="roc"> </i>101 West Street, New York, NY 12345</span>
						<li><span><i class="phone"> </i>Phone : (000) 888 88888</span>
						</li><li><a href="mailto:info@example.com"><i class="mail"> </i>info@sitename.com </a></li>	
							<div class="clearfix"> </div>						
					</ul>
				</div>
				<div class="search2">
					  <form>
						 <input type="text" value="search" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'search';}">
						 <input type="submit" value="">
					  </form>
					</div>
					<div class="clearfix"> </div>
			</div>
		</div>
		<div class="header-bottom">
			<div class="container">
				<div class="logo">
					<a href="index.html"><img src="images/logo.png" class="img-responsive" alt="" /></a>
				</div>
				<div class="head-nav">
					<span class="menu"> </span>
						<ul class="cl-effect-15">
								<li><a href="index.html" "data-hover="HOME">HOME</a></li>
								<li><a href="about.html" data-hover="ABOUT">ABOUT</a></li>
								<li><a href="services.html" data-hover="SERVICES">SERVICES</a></li>
								<li class="active"><a href="portfolio.html">PORTFOLIO</a></li>
								<li><a href="404.html" data-hover="BLOG">BLOG</a></li>
								<li><a href="contact.html" data-hover="CONTACT">CONTACT</a></li>
									<div class="clearfix"> </div>
							</ul>
				</div>
					<div class="clearfix"> </div>
			</div>
		</div>
						<!-- script-for-nav -->
					<script>
						$( "span.menu" ).click(function() {
						  $( ".head-nav ul" ).slideToggle(300, function() {
							// Animation complete.
						  });
						});
					</script>
				<!-- script-for-nav --> 	
				<i class="line"> </i>
				
	</div>	
<div class="portfolio">
	<div class="container">
	    <ul id="filters" class="clearfix">
						<li><span class="filter active" data-filter="app card icon logos web">All</span></li>
						<li><span class="filter" data-filter="card">Design</span></li>
						<li><span class="filter" data-filter="icon">Logo</span></li>
						<li><span class="filter" data-filter="logos">Photography</span></li>
						</ul>
					<div id="portfoliolist">
					<div class="portfolio card mix_all  wow bounceIn" data-wow-delay="0.4s" data-cat="card" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper grid_box">		
							 <a href="images/img1.jpg" class="swipebox"  title="Image Title"> <img src="images/img1.jpg" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
		                </div>
					</div>				
					<div class="portfolio app mix_all  wow bounceIn" data-wow-delay="0.4s" data-cat="app" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper grid_box">		
							 <a href="images/img2.jpg" class="swipebox"  title="Image Title"> <img src="images/img2.jpg" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
		                </div>
					</div>					
					<div class="portfolio icon mix_all  wow bounceIn" data-wow-delay="0.4s" data-cat="icon" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper grid_box">		
							 <a href="images/img3.jpg" class="swipebox"  title="Image Title"> <img src="images/img3.jpg" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
		                </div>
					</div>
					<div class="portfolio app mix_all  wow bounceIn" data-wow-delay="0.4s" data-cat="app" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper grid_box">		
							 <a href="images/img4.jpg" class="swipebox"  title="Image Title"> <img src="images/img4.jpg" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
		                </div>
					</div>			
					<div class="portfolio card mix_all  wow bounceIn" data-wow-delay="0.4s" data-cat="card" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper grid_box">		
							 <a href="images/img5.jpg" class="swipebox"  title="Image Title"> <img src="images/img5.jpg" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
		                </div>
					</div>	
					<div class="portfolio card mix_all  wow bounceIn" data-wow-delay="0.4s" data-cat="card" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper grid_box">		
							 <a href="images/img6.jpg" class="swipebox"  title="Image Title"> <img src="images/img6.jpg" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
		                </div>
					</div>	
					<div class="portfolio icon mix_all  wow bounceIn" data-wow-delay="0.4s" data-cat="icon" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper grid_box">		
							 <a href="images/img7.jpg" class="swipebox"  title="Image Title"> <img src="images/img7.jpg" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
		                </div>
						</div>
						<div class="portfolio logos mix_all wow bounceIn" data-wow-delay="0.4s" data-cat="logos" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper grid_box">		
							 <a href="images/img8.jpg" class="swipebox"  title="Image Title"> <img src="images/img8.jpg" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
		                </div>
					</div>
				<div class="clearfix"></div>					
				</div>
		  <div class="clearfix"></div>
            </div>
			</div>
	  <!-- Script for gallery Here -->
				<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
					<script type="text/javascript">
					$(function () {
						
						var filterList = {
						
							init: function () {
							
								// MixItUp plugin
								// http://mixitup.io
								$('#portfoliolist').mixitup({
									targetSelector: '.portfolio',
									filterSelector: '.filter',
									effects: ['fade'],
									easing: 'snap',
									// call the hover effect
									onMixEnd: filterList.hoverEffect()
								});				
							
							},
							
							hoverEffect: function () {
							
								// Simple parallax effect
								$('#portfoliolist .portfolio').hover(
									function () {
										$(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
										$(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');				
									},
									function () {
										$(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
										$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');								
									}		
								);				
							
							}
				
						};
						
						// Run the show!
						filterList.init();
						
						
					});	
					</script>
					<i class="line"> </i>
	<!--end-vision-->
	<!-- footer -->
	<div class="footer">
		<div class="container">
			<div class="footer-top">
				<div class="col-md-4 lates">
					<h4>Latest from blog:</h4>
					<div class="latest-top">
						<div class="latest-left">
							<img src="images/man.png" class="img-responsive" alt="">
						</div>
						<div class="latest-right">
							<p>Mauris orci purus, ultrices dapibus justo non, eleifend consequat lorem. </p>
							<h6>July 17, 2013</h6>
						</div>
							<div class="clearfix"> </div>
					</div>
					<div class="latest-top">
						<div class="latest-left">
							<img src="images/flow.png" class="img-responsive" alt="">
						</div>
						<div class="latest-right">
							<p>Pellentesque et magna malesuada, scelerisque elit ac, convallis lacus.  </p>
							<h6>July 16, 2013</h6>
						</div>
							<div class="clearfix"> </div>
					</div>
				</div>
				<div class="col-md-4 confo">
					<h4>Contact info:</h4>
						<ul class="number1">
							<li><span><i class="roc1"> </i>101 West Street, New York, NY 12345</span>
							</li><li><span><i class="phone1"> </i>phone:(000) 888 88888</span>
							</li><li><a href="mailto:info@example.com"><i class="mail1"> </i>info@sitename.com </a></li>	
							</li><li><span><i class="sky"> </i>atech-support</span>
								<div class="clearfix"> </div>						
						</ul>
				</div>
				<div class="col-md-4 social">
					<h4>We’re social:</h4>
						<ul>
							<li><a href="#"><i class="twiter"> </i></a></li>
							<li><a href="#"><i class="facebk"> </i></a></li>
							<li><a href="#"><i class="googpl"> </i></a></li>
							<li><a href="#"><i class="pp"> </i></a></li>
							<li><a href="#"><i class="ttt"> </i></a></li>
							<li><a href="#"><i class="linkd"> </i></a></li>
							<li><a href="#"><i class="youtube"> </i></a></li>
							<li><a href="#"><i class="cat"> </i></a></li>
							<li><a href="#"><i class="ol"> </i></a></li>
							<li><a href="#"><i class="ven"> </i></a></li>
							<li><a href="#"><i class="ball"> </i></a></li>
							<li><a href="#"><i class="rou"> </i></a></li>
							<li><a href="#"><i class="cam"> </i></a></li>
							<li><a href="#"><i class="clim"> </i></a></li>
							<li><a href="#"><i class="beha"> </i></a></li>
							<li><a href="#"><i class="vad"> </i></a></li>
								<div class="clearfix"></div>	
						</ul>
				</div>
					<div class="clearfix"> </div>
				</div>
			<div class="foot">
				<p>Copyright &copy; 2015.Company name All rights reserved.<a target="_blank" href="http://wolfly_bishe.gitee.io">admin</a></p>
			</div>
		</div>
	</div>
<!-- footer -->
</body>
</html>